<template>
  <div>
    <el-container>
      <el-header height="140px"
                 class="cheader">

        <el-avatar :src="avatar"
                   :size="50">
        </el-avatar>
        <label>XXL</label>
        <el-button-group>
          <el-button @click="pushIndex"
                     type="primary"
                     plain>主页</el-button>
          <el-button @click="pushAdd"
                     type="success"
                     plain>发表文章</el-button>
          <el-button type="info"
                     @click="loginout"
                     plain>{{isLogin ? "退出" : "登录" }}</el-button>
        </el-button-group>

      </el-header>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'Bheader',
  components: {},
  props: {},
  data() {
    return {
      avatar: require('../assets/avatar.jpg'),
      username: '游客',
      isLogin: false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const user = this.$store.getters.getUser
      const token = localStorage.getItem('Authorization')
      if (user != null && token != null && token.trim() != '') {
        // this.avatar = require(user.avatar)
        this.username = user.username
        this.isLogin = true
      } else {
        this.isLogin = false
      }
    },
    pushIndex() {
      this.$router.push({ name: 'Index' })
    },
    pushAdd() {
      this.$router.push({ name: 'BlogAdd' })
    },
    loginout() {
      if (this.isLogin != true) {
        this.$router.push({ name: 'Login' })
        return
      }
      this.$axios
        .get('/user/logout', {
          headers: {
            Authorization: localStorage.getItem('Authorization'),
          },
        })
        .then((res) => {
          this.$store.commit('REMOVE_INFO')
          this.$router.push({ name: 'Login' })
        })
    },
  },
  watch: {},
  computed: {},
  mounted() {},
}
</script>
<style scoped>
.cheader {
  background-color: rgb(237, 247, 255);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>